<script setup lang="ts">
const router = useRouter();
const route = useRoute();
// 设置定时器，5秒后跳转
const timer = setTimeout(() => {
    router.push({
    path: '/yunshi/report',
    query: { oid: route.query.oid }
  })
}, 10000);

// 在组件卸载前清除定时器
onBeforeUnmount(() => {
  clearTimeout(timer);
});

const name = ref()

const sex = ref()

const setInfo = () => {
    name.value = route.query.name
    if (route.query.sex == '1') {
        sex.value = '男'
    } else {
        sex.value = '女'
    }

}

onMounted(() => {
  setInfo()
});
</script>


<template>
  <div class="w-full min-h-screen relative">
    <Header :back="'/yunshi'" />
    <img 
      src="/assets/images/yunshi/jiazaiye.png" 
      alt=""
      class="w-full h-auto object-contain"
    />
    <div class="absolute left-0 right-0 top-[8%] flex justify-center text-[#f6ca88] text-3xl">
        {{name}}的八字终生运排盘
    </div>
    <div class="absolute left-0 right-0 top-[15%] flex justify-center text-white text-2xl">
        <span>姓名：</span>
        <span>{{ name }}</span>
        <span>&nbsp;&nbsp;</span>
        <span>性别：</span>
        <span>{{sex}}</span>
    </div>
    <div class="absolute w-[90%] mx-auto left-0 right-0 top-[25%] flex justify-between">
        <!-- 图片1：600ms延迟 -->
        <img 
            src="/assets/images/yunshi/year.png"
            class="w-[70px] opacity-0 animate-fade-in-up delay-[600ms]" 
        />
        
        <!-- 图片2：1200ms延迟 -->
        <img 
            src="/assets/images/yunshi/month.png"
            class="w-[70px] opacity-0 animate-fade-in-up delay-[1200ms]" 
        />
        
        <!-- 图片3：1800ms延迟 -->
        <img 
            src="/assets/images/yunshi/day.png"
            class="w-[70px] opacity-0 animate-fade-in-up delay-[1800ms]" 
        />
        
        <!-- 图片4：2400ms延迟 -->
        <img 
            src="/assets/images/yunshi/hour.png"
            class="w-[70px] opacity-0 animate-fade-in-up delay-[2400ms]" 
        />
    </div>
    <div class="absolute left-0 right-0 bottom-[45%] flex justify-center text-[#671112]">
        正在录入你的生辰八字...
    </div>
    <div class="absolute left-0 right-0 bottom-0 flex justify-center">
        <div class="w-[300px] h-[230px]">
            <!-- 外圈第二张图 (顺时针) -->
            <img 
            src="/assets/images/yunshi/xuan_1.png"
            class="w-[280px] h-[280px] transition-opacity
                    absolute left-1/2 -translate-x-1/2 -translate-y-1/2
                    animate-rotate-cw z-10"
            />
            
            <!-- 外圈第一张图 (逆时针) -->
            <img 
            src="/assets/images/yunshi/xuan_2.png"
            class="w-[170px] h-[170px] transition-opacity
                    absolute left-1/2 -translate-x-1/2 -translate-y-1/2
                    animate-rotate-ccw z-20"
            />
            
            <!-- 中心图 -->
            <img 
            src="/assets/images/yunshi/xuan_center.png"
            class="w-[100px] h-[100px] transition-opacity
                    absolute left-1/2 -translate-x-1/2 -translate-y-1/2
                    z-30"
            />
        </div>
    </div>
  </div>
</template>
<style scoped>
    @keyframes rotate-cw {
        from {
        transform: translate(-50%, -50%) rotate(0deg); /* 同时保持平移 */
        }
        to {
        transform: translate(-50%, -50%) rotate(360deg);
        }
    }

    @keyframes rotate-ccw {
        from {
        transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
        transform: translate(-50%, -50%) rotate(-360deg);
        }
    }

    .animate-rotate-cw {
        animation: rotate-cw 10s linear infinite;
        transform-origin: center;
    }

    .animate-rotate-ccw {
        animation: rotate-ccw 10s linear infinite;
        transform-origin: center;
    }

    /* 自定义淡入上升动画 */
    @keyframes fadeInUp {
        from {
        opacity: 0;
        transform: translateY(20px);
        }
        to {
        opacity: 1;
        transform: translateY(0);
        }
    }

    /* 注册Tailwind动画 */
    .animate-fade-in-up {
        animation: fadeInUp 0.6s ease-out forwards;
    }

    /* 定义延迟类 */
    .delay-\[600ms\]     { animation-delay: 600ms; }
    .delay-\[1200ms\]   { animation-delay: 1200ms; }
    .delay-\[1800ms\]   { animation-delay: 1800ms; }
    .delay-\[2400ms\]   { animation-delay: 2400ms; }
</style>